<template>
  <div class="edit-education-content">
    <el-form label-position="top" :model="form" :rules="rules" ref="form" v-loading="formLoading">
      <el-row :gutter="100">
        <el-col :span="12">
          <el-form-item label="学校名称" prop="schoolName">
            <el-autocomplete
                class="inline-input"
                v-model="form.schoolName"
                :fetch-suggestions="querySearch"
                placeholder="请填写学校名称"
                :trigger-on-focus="false"
            ></el-autocomplete>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="学历" prop="education">
            <el-select v-loading="educationLoading" v-model="form.education" placeholder="请选择学历">
              <el-option
                  v-for="item in education"
                  :key="item.id"
                  :label="item.data"
                  :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="100">
        <el-col :span="12">
          <el-form-item label="专业名称" prop="major">
            <el-autocomplete
                class="inline-input"
                v-model="form.major"
                :fetch-suggestions="querySearchMajor"
                placeholder="请填写专业名称"
                :trigger-on-focus="false"
            ></el-autocomplete>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="时间" prop="startTime">
            <el-col :span="11">
              <el-date-picker
                  value-format="yyyy-MM-dd"
                  format="yyyy-MM-dd"
                  v-model="form.startTime"
                  type="date"
                  placement="bottom-start"
                  :picker-options="{disabledDate:(time)=>{
                    return time.getTime()>new Date().getTime();
                  }}"
                  placeholder="请选择">
              </el-date-picker>
            </el-col>
            <el-col style="text-align: center" :span="1">-</el-col>
            <el-col :span="11">
              <el-date-picker
                  value-format="yyyy-MM-dd"
                  format="yyyy-MM-dd"
                  v-model="form.endTime"
                  type="date"
                  placement="bottom-start"
                  :picker-options="{disabledDate}"
                  placeholder="请选择">
              </el-date-picker>
            </el-col>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="在校经历(选填)" prop="experience">
            <el-input
                v-model="form.experience"
                type="textarea"
                maxlength="500"
                :autosize="{ minRows: 4, maxRows: 8}"
                :placeholder="'1.在校担任职务...\n2.获得荣誉\n3.所学主要课程'">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import {getCusEducation, submitEducation} from "@/api/mineCenter";
import {getEducation as getEducationApi, getFieldApi, getSchoolApi} from "@/api/config";

export default {
  name: "Education",
  emits: ['refresh'],
  data() {
    return {
      formLoading:false,
      form: {
        id:0,
        schoolName:'',
        education:null,
        major:'',
        startTime:'',
        endTime:'',
        experience: '',
      },
      optionProps: {
        value: 'fieldName',
        label: 'fieldName',
        children: 'sonList',
      },
      education:[],
      school:[],
      educationLoading:true,
      data_formInput: {
        value: ''
      },
      field: [],
      rules: {
        schoolName: [
          {required: true, message: '请输入学校名称'},
        ],
        education: [
          {required: true, message: '请选择学历', trigger: 'blur'}
        ],
        major: [
          {required: true, message: '请填写专业名称', trigger: 'blur'}
        ],
        startTime: [
          {required: true, message: '请选择时间', trigger: 'blur'}
        ]
      }
    }
  },
  methods: {
    querySearch(queryString, cb) {
      let restaurants = this.school;
      let results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);

    },
    querySearchMajor(queryString, cb) {
      let restaurants = this.field;
      let results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);

    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    disabledDate(time){
      if(this.form.startTime){
        return time.getTime()<new Date(this.form.startTime).getTime()||time.getTime()>new Date().getTime();
      }else{
        return time.getTime()>new Date().getTime()
      }
    },
    submit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if(this.formLoading){
            this.$message.warning('请等待加载完成');
            return;
          }
          if(!this.form.endTime){
            this.$message.error('请选择结束时间');
            return;
          }
          const loading=this.$loading({text:'加载中'})
          if(typeof this.form.major==='object'){
            this.form.major=this.form.major[2];
          }
          submitEducation(this.form).then(()=>{
            this.$message.success('保存成功');
            this.$emit('refresh',4)
          }).finally(()=>{
            loading.close()
          })
        }
      });
    },
    getEducation() {
      this.educationLoading=true
      getEducationApi({}).then((res)=>{
        this.education=res;
      }).finally(()=>{
        this.educationLoading=false;
      })
    },
    getField() {
      this.educationLoading=true
      getFieldApi().then((res)=>{
        if (res !== null) {
          for (let i = 0, len = res.length; i < len; i++) {
            this.data_formInput = {};
            this.data_formInput.value = res[i].fieldName;
            this.field.push(this.data_formInput);
          }
        }
      }).finally(()=>{
        this.educationLoading=false;
      })
    },
    getSchool() {
      this.educationLoading=true
      getSchoolApi().then((res)=>{
            if (res !== null) {
              for (let i = 0, len = res.length; i < len; i++) {
                this.data_formInput = {};
                this.data_formInput.value = res[i].schoolName;
                this.school.push(this.data_formInput);
              }
            }
      }).finally(()=>{
        this.educationLoading=false;
      })
    },
    getDetail(id){
      this.formLoading=true
      getCusEducation({id}).then((res)=>{
        this.form=res;
      }).finally(()=>{
        this.formLoading=false;
      }).catch(()=>{
        this.$emit('refresh',4);
      })
    }
  },
  mounted() {
    this.getEducation()
    this.getSchool()
    this.getField()
  }
}
</script>

<style lang="scss" scoped>
.edit-education-content {
  padding: 0 60px;

  .el-date-editor, .el-select {
    width: 100%;
  }

  .el-form-item__content {
    position: relative;
  }

  .iconfont {
    color: $darkGray;
    font-size: 18px;
    font-weight: bold;
    position: absolute;
    width: 30px;
    transform: translate(-50%, -50%);
    top: 50%;
    right: -15px;
    cursor: pointer;
  }
}
</style>
